<template>
  <div class="contain">
    <!-- 轮播图 -->
    <div class="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper swiper-no-swiping">
          <div class="swiper-slide" v-for="(item,index) in banImg" :key="index">
            <img :src="item" alt="">
          </div>
        </div>
      </div>
      <div class="con">
        <div class="banText">
          <h1>Hello, this is Sakura</h1>
          <p>一个拥有像素眼的前端工程师</p>
          <span @click="moveTO('.aboMe')">关于我</span>
          <span @click="moveTO('.works')">我的作品</span>
        </div>
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav clearFix" ref="nav">
      <div class="con clearFix">
        <div class="navTit">
          <a href="javascript:;">Sakura的博客</a>
        </div>
        <div class="navList clearFix">
          <ul>
            <li v-for="(item,index) in navList" :key="index" @click="moveTO(item.path)">
              {{item.tit}}
            </li>
          </ul>
        </div>
        <div class="navImg" @click="navDropDown">
          <img src="../assets/images/nav.png" alt="">
        </div>
      </div>
    </div>
    <div class="seize" ref="seize"></div>
    <!-- 关于我 -->
    <div class="aboMe" ref="aboMe">
      <div class="con clearFix">
        <div class="pubTit">
          <h1>关于我</h1>
        </div>
        <div class="aboMeImg">
          <img src="../assets/images/1.png" alt="">
        </div>
        <div class="aboMeWd">
          <p>我叫孙仕凌，21岁，坐标深圳，是一名web前端工程师</p>
          <p><br></p>
          <p>很多初学者朋友可能会搜索到我的简历，这是<a href="javascript:;">项目源码</a> ，如果有帮到你 希望给个star~</p>
          <p><br></p>
          <!-- <p>这个版本是两年前写的，现在用React改版写了一版新的<a href="javascript:;">预览 www.redspite.com 项目源码</a></p> -->
        </div>
      </div>
    </div>
    <!-- 求职意向 -->
    <div class="job" ref="job">
      <div class="con clearFix">
        <div class="pubTit">
          <h1>求职意向</h1>
        </div>
        <a-row class="jobList">
          <a-col :xs="12" :lg="6" v-for="(item,index) in jobList" :key="index" class="jobListCol">
            <div class="jobImg">
              <img :src="item.src" alt="">
            </div>
            <div class="jobWd">
              <h5>{{item.tit}}</h5>
              <p>{{item.text}}</p>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <!-- 作品集 -->
    <div class="works" ref="works">
      <div class="con clearFix">
        <div class="pubTit">
          <h1>作品集</h1>
        </div>
        <div class="worksList">
          <a-row :gutter="26">
            <a-col class="gutter-row" :xs="12" :lg="6" v-for="(item,index) in worksList" :key="index">
              <div class="gutter-box">
                <a href="javascript:;">
                  <div class="worksListImg">
                    <img :src="item.src" alt="">
                  </div>
                  <div class="worksListWd">
                    <h5>{{item.tit}}</h5>
                    <p>{{item.text}}</p>
                    <img src="../assets/images/search.png" alt="">
                  </div>
                </a>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <!-- 技术掌握 -->
    <div class="technology" ref="technology">
      <div class="con clearFix">
        <div class="pubTit">
          <h1>技术掌握</h1>
        </div>
        <a-row :gutter="26">
          <a-col class="gutter-row" :xs="12" :lg="6" v-for="(item,index) in technology" :key="index">
            <div class="gutter-box">
              <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
                <circle r="55" cy="60" cx="60" stroke-width="8" stroke="#ddd"  fill="none"/>
                <circle :class="['progress',{ 'active1': index == 0 && technologyBol},{'active2': index == 1 && technologyBol},{ 'active3': index == 2 && technologyBol},{'active4': index == 3 && technologyBol},{'active5': index == 4 && technologyBol},{'active6': index == 5 && technologyBol}]" r="55" cy="60" cx="60" stroke-width="8" stroke="#2c3e50"  fill="none" />
              </svg>
              <div class="technologyWd">
                {{item.tit}}
              </div>
              <h5>{{item.text}}</h5>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <!-- 我的经历 -->
    <div class="experience" ref="experience">
      <div class="con clearFix">
        <div class="pubTit">
          <h1>我的经历</h1>
        </div>
        <div class="experienceList clearFix">
          <div class="experienceBox clearFix" v-for="(item,index) in experienceList" :key="index">
            
            <div class="experienceListRight">
              <p>{{item.data1}}</p>
              <p>-</p>
              <p>{{item.data2}}</p>
            </div>
            <div :class="['experienceListLeft',{'ontrue':index % 2 == 1}]">
              <h1>{{item.tit}}</h1>
              <h5>{{item.subtit}}</h5>
              <p>{{item.text}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 联系我 -->
    <div class="contact" ref="contact">
      <div class="con clearFix">
        <div class="pubTit">
          <h1>联系我</h1>
        </div>
        <div class="contactText clearFix">
          <div class="contactTextLeft">
            <p>姓名：</p>
            <p>邮箱：</p>
            <p>联系电话：</p>
            <p>微信号：</p>
          </div>
          <div class="contactTextRight">
            <p>孙仕凌</p>
            <p>1363039286@qq.com</p>
            <p>18872520824</p>
            <p>ssl1363039286</p>
          </div>
          
        </div>
      </div>
    </div>
    <!-- 回顶部 -->
    <div>
      <a-back-top />
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
import $ from 'jquery'

export default {
  name: 'home',
  data () {
    return {
      banImg:[ // 页头轮播图
        require("../assets/images/bg1.jpg"),
        require("../assets/images/bg2.jpg"),
        require("../assets/images/bg3.jpg"),
        require("../assets/images/bg4.jpg"),
      ],
      navList:[ // 导航栏
        {tit:"关于我",path:".aboMe"},
        {tit:"求职意向",path:".job"},
        {tit:"作品集",path:".works"},
        {tit:"技术掌握",path:".technology"},
        {tit:"我的经历",path:".experience"},
        {tit:"联系我",path:".contact"},
      ], 
      navBol:true, // 移动端下拉导航栏
      jobList:[ // 求职
        {tit:"PS切图",text:"从PSD上切出页面需要的图片将小图标合成spirts优化。",src:require("../assets/images/web.png")},
        {tit:"网页制作",text:"响应式页面,简单不冗余代码。css3流畅动画效果，兼容不同浏览器。",src:require("../assets/images/css.png")},
        {tit:"前端功能",text:"用JS完成常见的前端功能特效,用AJAX读取后台数据。",src:require("../assets/images/js.png")},
        {tit:"h5页面",text:"移动端页面的书写兼容平板、安卓、IOS不同终端。",src:require("../assets/images/h5.png")},
      ],
      worksList:[ // 作品
          {tit:"商城类页面",text:"购物车结算jq，订单的选择或删除、金额的计算。",src:require("../assets/images/01.jpg")},
          {tit:"测试类页面",text:"AJAX获取后台数据，用数组读取选项与题目。记录测试者的选项返给后台。",src:require("../assets/images/02.jpg")},
          {tit:"直播类页面",text:"直播页面响应式，css3 jq运用较多",src:require("../assets/images/03.jpg")},
          {tit:"列表类页面",text:"无缝轮播手写，花瓣动画。",src:require("../assets/images/04.jpg")},
          {tit:"详情类页面",text:"视频播放，富文本编辑器手写。",src:require("../assets/images/05.jpg")},
          {tit:"官网类首页",text:"多数据响应式网页，能兼容不同大小电脑分辨率",src:require("../assets/images/06.jpg")},
          {tit:"移动端页面",text:"列表页，兼容安卓、ios、平板",src:require("../assets/images/07.jpg")},
          {tit:"我的技术博客",text:"自己平时的知识点积累",src:require("../assets/images/08.jpg")}
      ],
      boxTop:[], // 盒子距顶部距离
      technology:[ // 技术
        {tit:"95%",text:"HTML5"},
        {tit:"90%",text:"CSS"},
        {tit:"90%",text:"VUE"},
        {tit:"90%",text:"JS"},
        {tit:"90%",text:"微信小程序"},
        {tit:"90%",text:"jQuery"},
      ],
      technologyBol:false, // 控制添加转动百分比样式的时间
      experienceList:[ // 经历
        {tit:"武汉沃德邦户外拓展有限公司",subtit:"技术部/前端工程师",text:"负责官网页面制作。PSD切图后构建页面框架利用JS、CSS3书写前端功能，让页面更充实丰富",data1:"2019/6",data2:"2020/6"},
        {tit:"武汉沃德邦户外拓展有限公司",subtit:"技术部/前端工程师",text:"负责官网页面制作。PSD切图后构建页面框架利用JS、CSS3书写前端功能，让页面更充实丰富",data1:"2019/6",data2:"2020/6"},
        {tit:"武汉沃德邦户外拓展有限公司",subtit:"技术部/前端工程师",text:"负责官网页面制作。PSD切图后构建页面框架利用JS、CSS3书写前端功能，让页面更充实丰富",data1:"2019/6",data2:"2020/6"},
      ],
    }
  },
  methods:{
    // 轮播图
    my_swiper(){
      var indexBSwiper = new Swiper ('.banner .swiper-container', {
        speed: 1000,
        loop:true,
        autoplay : 4000,
        onSlideChangeStart: function(swiper){
          $(".banner .swiper-slide").eq(swiper.activeIndex).children("img").removeClass("ontrue")
        },
        onSlideChangeEnd: function(swiper){
          $(".banner .swiper-slide").eq(swiper.activeIndex).children("img").addClass("ontrue")
        }
      })
      
    },
    // 导航栏面包屑下拉菜单
    navDropDown(){
      if(this.navBol){
        $(".navList").slideDown(400);
        this.navBol = false;
      }else{
        $(".navList").slideUp(400);
        this.navBol = true;
      }
    },
    // 锚点链接滑动
    moveTO(setTop){
      $('html,body').animate({
          scrollTop: $(setTop).offset().top - 70
      }, 500);
    },
    // 页面滚动事件
    handleScroll(e){
      // 导航栏置顶
      var scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop;
      if(scrollTop >= this.boxTop[0]){
        this.$refs.nav.style.cssText  = "position:fixed;left:0;top:0;";
        this.$refs.seize.style.display = "block";
      }else{
        this.$refs.nav.style.cssText  = "position:relative;left:initial;top:initial;";
        this.$refs.seize.style.display = "none";
      }
      // 导航栏添加选中效果
      if(scrollTop >= this.boxTop[1]){$(".navList ul li").eq(0).addClass("ontrue").siblings().removeClass("ontrue");}
      if(scrollTop >= this.boxTop[2]){$(".navList ul li").eq(1).addClass("ontrue").siblings().removeClass("ontrue");}
      if(scrollTop >= this.boxTop[3]){$(".navList ul li").eq(2).addClass("ontrue").siblings().removeClass("ontrue");}
      if(scrollTop >= this.boxTop[4]){$(".navList ul li").eq(3).addClass("ontrue").siblings().removeClass("ontrue");this.technologyBol = true;}
      if(scrollTop >= this.boxTop[5]){$(".navList ul li").eq(4).addClass("ontrue").siblings().removeClass("ontrue");}
      if(scrollTop >= this.boxTop[6]){$(".navList ul li").eq(5).addClass("ontrue").siblings().removeClass("ontrue");}

    },
    // 获得所有盒子元素距顶部距离 - 导航栏高度    作用于判断当前滚轮位置使对应导航栏变色
    srcTop(){
      this.boxTop.push(this.$refs.nav.offsetTop);
      this.boxTop.push(this.$refs.aboMe.offsetTop - 70);
      this.boxTop.push(this.$refs.job.offsetTop - 70);
      this.boxTop.push(this.$refs.works.offsetTop - 70);
      this.boxTop.push(this.$refs.technology.offsetTop - 70);
      this.boxTop.push(this.$refs.experience.offsetTop - 70);
      this.boxTop.push(this.$refs.contact.offsetTop - 70);
    },
  },
  mounted(){
    this.my_swiper();
    this.srcTop();
    window.addEventListener('scroll',this.handleScroll,true);
  }
}
</script>

<style scoped>
  @import url("../assets/css/home.css");
</style>